{% extends "background/base.html" %}
{% block pagetitle %}: 内容替换{% endblock %}
{% block content %}
  <div id="NAVID" data-nav="replace"></div>
  <div class="row">
    <div class="col-xs-6">
      <div class="panel panel-primary">
        <div class="panel-heading">替换规则
          <button
            data-target="#myModal"
            data-toggle="modal"
            class="btn btn-sm btn-success pull-right">创建</button>
        </div>
        <div class="panel-body">
          <table class="table">
            <thead>
              <tr>
                <td>规则</td>
                <td style="width:150px;">操作</td>
              </tr>
            </thead>
            <tbody>
              {% for rep in replace_rule %}
                <tr>
                  <td>{{rep|force_escape}}</td>
                  <td class="table-action">
                    <button data-pk='{{rep.pk}}' class="btn btn-xs btn-primary apply-rule">应用</button>
                    <a href="{%url 'bbg:edit_rule' rep.db_data.pk%}" class="btn btn-xs btn-success">编辑</a>
                    <a
                      href="{%url 'bbg:delete_rule' rep.db_data.pk%}"
                      class="btn btn-xs btn-danger">删除</a>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel panel-primary">
        <div class="panel-heading">替换历史</div>
        <div class="panel-body"></div>
      </div>
    </div>
  </div>
  <div
    id="myModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myModalLabel"
    aria-hidden="true"
    class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="newRuleForm" action="." method="POST" class="form-horizontal">
          <div class="modal-header">
            <button data-dismiss="modal" class="close">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 id="myModalLabel" class="modal-title">创建替换规则</h4>
          </div>
          <div class="modal-body">{% csrf_token %}
            {% with create_rule_form as CRF %}
            <div class="form-group {%if CRF.rule_res.errors%}has-error{%endif%}">
              <label for="inputRe" class="col-lg-2 control-label">{{CRF.rule_res.label}}</label>
              <div class="col-lg-10">
                <input
                  id="inputRe"
                  name="rule_res"
                  type="text"
                  value="{{CRF.rule_res.value|default:''}}"
                  class="form-control"/>
                <span class="help-block">{{CRF.rule_res.errors}}</span>
              </div>
            </div>
            <div class="form-group {%if CRF.replace_to.errors%}has-error{%endif%}">
              <label for="inputReplace" class="col-lg-2 control-label">{{CRF.replace_to.label}}</label>
              <div class="col-lg-10">
                <input
                  id="inputReplace"
                  type="text"
                  value="{{CRF.replace_to.value|default:''}}"
                  name="replace_to"
                  class="form-control"/>
                <span class="help-block">{{CRF.replace_to.errors}}</span>
              </div>
            </div>{% endwith %}
            <div class="modal-footer">
              <button data-dismiss="modal" class="btn btn-default btn-raised">关闭</button>
              <button type="submit" class="btn btn-primary btn-raised">保存</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
{% endblock %}
{% block footerjs %}
  <script>
    $(function () {
      {% if create_rule_form.errors or edit_rule %}
        $("#myModal").modal('show')
      {% endif %}
    });
  </script>
{% endblock %}
